<template>
	<view class="faq-page">
		<!-- <uv-navbar title="常见问题" :border="false" left-icon="arrow-left" @left-click="goBack">
		</uv-navbar> -->

		<scroll-view class="faq-content" scroll-y="true">
      <view class="content-container">
        <view class="section">
          <text class="section-title">链智Quant AI</text>
          <text class="section-subtitle">常见问题解答（FAQ）</text>
          <text class="section-desc">感谢您使用链智Quant AI！我们为您整理了以下常见问题及解答，希望能帮助您获得更顺畅的体验。</text>
        </view>

				<!-- 账户与注册 -->
				<view class="faq-category">
					<view class="category-header">
						<view class="category-icon">
							<uv-icon name="account" size="40" color="#00d4aa"></uv-icon>
						</view>
						<text class="category-title">账户与注册</text>
					</view>

					<view class="faq-item" v-for="(item, index) in accountFaqs" :key="'account-' + index"
						@click="toggleItem('account', index)">
						<view class="faq-question">
							<text class="question-text">{{ item.question }}</text>
							<view class="toggle-icon" :class="{ active: item.expanded }">
								<text>{{ item.expanded ? '−' : '+' }}</text>
							</view>
						</view>
						<view class="faq-answer" v-if="item.expanded">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>

				<!-- 功能与使用 -->
				<view class="faq-category">
					<view class="category-header">
						<view class="category-icon">
							<uv-icon name="setting" size="40" color="#00d4aa"></uv-icon>
						</view>
						<text class="category-title">功能与使用</text>
					</view>

					<view class="faq-item" v-for="(item, index) in featureFaqs" :key="'feature-' + index"
						@click="toggleItem('feature', index)">
						<view class="faq-question">
							<text class="question-text">{{ item.question }}</text>
							<view class="toggle-icon" :class="{ active: item.expanded }">
								<text>{{ item.expanded ? '−' : '+' }}</text>
							</view>
						</view>
						<view class="faq-answer" v-if="item.expanded">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>

				<!-- 订阅与支付 -->
				<view class="faq-category">
					<view class="category-header">
						<view class="category-icon">
							<uv-icon name="gift" size="40" color="#00d4aa"></uv-icon>
						</view>
						<text class="category-title">订阅与支付</text>
					</view>

					<view class="faq-item" v-for="(item, index) in paymentFaqs" :key="'payment-' + index"
						@click="toggleItem('payment', index)">
						<view class="faq-question">
							<text class="question-text">{{ item.question }}</text>
							<view class="toggle-icon" :class="{ active: item.expanded }">
								<text>{{ item.expanded ? '−' : '+' }}</text>
							</view>
						</view>
						<view class="faq-answer" v-if="item.expanded">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>

				<!-- 隐私与安全 -->
				<view class="faq-category">
					<view class="category-header">
						<view class="category-icon">
							<uv-icon name="lock" size="40" color="#00d4aa"></uv-icon>
						</view>
						<text class="category-title">隐私与安全</text>
					</view>

					<view class="faq-item" v-for="(item, index) in securityFaqs" :key="'security-' + index"
						@click="toggleItem('security', index)">
						<view class="faq-question">
							<text class="question-text">{{ item.question }}</text>
							<view class="toggle-icon" :class="{ active: item.expanded }">
								<text>{{ item.expanded ? '−' : '+' }}</text>
							</view>
						</view>
						<view class="faq-answer" v-if="item.expanded">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>

				<!-- 技术问题与其他 -->
				<view class="faq-category">
					<view class="category-header">
						<view class="category-icon">
							<uv-icon name="list" size="40" color="#00d4aa"></uv-icon>
						</view>
						<text class="category-title">技术问题与其他</text>
					</view>

					<view class="faq-item" v-for="(item, index) in otherFaqs" :key="'other-' + index"
						@click="toggleItem('other', index)">
						<view class="faq-question">
							<text class="question-text">{{ item.question }}</text>
							<view class="toggle-icon" :class="{ active: item.expanded }">
								<text>{{ item.expanded ? '−' : '+' }}</text>
							</view>
						</view>
						<view class="faq-answer" v-if="item.expanded">
							<text class="answer-text">{{ item.answer }}</text>
						</view>
					</view>
				</view>

				<!-- 联系我们 -->
				<view class="contact-section">
					<view class="contact-icon">
						<uv-icon name="chat" size="60" color="#00d4aa"></uv-icon>
					</view>
					<text class="contact-title">还有其他问题？</text>
					<text class="contact-text">如果以上内容未能解决您的问题，请联系我们的客服团队</text>
					<view class="contact-buttons">
						<view class="contact-btn" @click="goToFeedback">
							<uv-icon name="edit-pen" size="24" color="#00d4aa" style="margin-right: 8rpx;"></uv-icon>
							<text class="btn-text">有奖意见反馈</text>
						</view>
						<view class="contact-btn primary" @click="contactService">
							<uv-icon name="Server" size="24" color="#fff" style="margin-right: 8rpx;"></uv-icon>
							<text class="btn-text">联系客服</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'FaqPage',
		data() {
			return {
				// 账户与注册
				accountFaqs: [{
						question: 'Q1：如何注册一个新账户？',
						answer: 'A1：打开App后，点击登录界面的"注册"按钮，您可以使用手机号码和验证码快速注册。',
						expanded: false
					},
					{
						question: 'Q2：忘记密码怎么办？',
						answer: 'A2：在登录页面点击"忘记密码"，输入您注册时使用的手机号，按照提示即可重置密码。',
						expanded: false
					},
					{
						question: 'Q3：一个手机号可以注册多个账户吗？',
						answer: 'A3：出于安全考虑，一个手机号只能绑定一个账户，无法重复注册。',
						expanded: false
					}
				],

				// 功能与使用
				featureFaqs: [{
						question: 'Q4：如何使用AI量化策略？',
						answer: 'A4：请确保您已登录账户。然后进入【策略页面】，点击页面对应策略进行查看历史记录及胜率，按照页面提示逐步操作即可完成。',
						expanded: false
					},
					{
						question: 'Q5：如何修改个人资料和头像？',
						answer: 'A5：登录后，点击右下角"我的"进入个人中心，再点击头像或"编辑资料"即可进行修改。',
						expanded: false
					},
					{
						question: 'Q6：App内的数据会同步吗？',
						answer: 'A6：会的。只要您登录同一账户，您在手机、平板等不同设备上的操作数据将会自动同步。',
						expanded: false
					}
				],

				// 订阅与支付
				paymentFaqs: [{
						question: 'Q7：如何购买/订阅高级服务？',
						answer: 'A7：进入"我的" - "解锁高级服务"，选择您需要的高级服务套餐，点击购买并根据提示完成支付即可。',
						expanded: false
					},
					{
						question: 'Q8：支持哪些支付方式？',
						answer: 'A8：我们目前支持港币，加密货币等支付方式。',
						expanded: false
					},
					{
						question: 'Q9：如何申请退款？',
						answer: 'A9：由于数字产品和服务特殊性，一旦购买成功，通常不予退款。如因特殊原因（如重复扣款、未收到服务）需要申请，请您在"我的" - "联系客服"，直接联系客服处理。',
						expanded: false
					}
				],

				// 隐私与安全
				securityFaqs: [{
						question: 'Q10：我的个人数据安全吗？',
						answer: 'A10：非常安全。我们严格遵守相关法律法规，对您的个人信息进行加密处理，并不会未经授权向任何第三方泄露或出售您的数据。详情请参阅我们的《隐私政策》。',
						expanded: false
					},
					{
						question: 'Q11：如何注销账户？',
						answer: 'A11：如果您决定注销账户，请在App内"我的" - "系统设置" - "账户与安全"中找到"注销账户"选项。请注意，注销后所有数据将被永久删除且不可恢复，请谨慎操作。',
						expanded: false
					}
				],

				// 技术问题与其他
				otherFaqs: [{
						question: 'Q12：App闪退/无法打开怎么办？',
						answer: 'A12：建议您尝试以下步骤：\n1. 检查手机网络是否正常\n2. 彻底关闭App后台后重新打开\n3. 检查App是否为最新版本，或前往应用商店更新\n4. 重启您的手机\n\n如果问题依旧，请联系客服并提供您的手机型号和系统版本。',
						expanded: false
					},
					{
						question: 'Q13：收不到短信验证码怎么办？',
						answer: 'A13：请检查：\n1. 手机是否欠费或信号不佳\n2. 是否被手机安全软件拦截\n3. 尝试60秒后重新获取\n\n若长时间无法收到，请联系客服协助处理。',
						expanded: false
					},
					{
						question: 'Q14：如何联系客服？',
						answer: 'A14：您可以通过以下方式联系我们：\n• 在线客服：在App内"我的" - "联系客服"中留言，工作时间客服会尽快回复\n• 微信公众号：关注【链智 Quant】进行咨询\n• 工作时间：周一至周五 9:00-18:00',
						expanded: false
					},
					{
						question: 'Q15：如何反馈建议或提交Bug？',
						answer: 'A15：我们非常欢迎您的宝贵意见！请在App内"我的" - "意见反馈"页面详细描述您的问题或建议，我们会认真评估并不断优化产品。',
						expanded: false
					}
				]
			}
		},

		methods: {
			// 切换FAQ项展开/收起
			toggleItem(category, index) {
				const categoryMap = {
					account: 'accountFaqs',
					feature: 'featureFaqs',
					payment: 'paymentFaqs',
					security: 'securityFaqs',
					other: 'otherFaqs'
				}
				const key = categoryMap[category]
				this[key][index].expanded = !this[key][index].expanded
			},

			// 返回上一页
			goBack() {
				uni.navigateBack()
			},

			// 跳转到意见反馈
			goToFeedback() {
				uni.navigateTo({
					url: '/subPages/ai/feedback'
				})
			},

			// 联系客服
			contactService() {
				uni.navigateTo({
					url: '/subPages/help/customer-service'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.faq-page {
		height: 100vh;
		background-color: #f5f7fa;
	}

	.faq-content {
		height: calc(100vh - 88rpx);
		padding: 32rpx;
	}

	.content-container {
		padding-bottom: 40rpx;
	}

	.section {
		background: linear-gradient(135deg, #00d4aa, #00c299);
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 32rpx;
		text-align: center;
	}

	.section-title {
		display: block;
		font-size: 44rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 16rpx;
		letter-spacing: 2rpx;
	}

	.section-subtitle {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.95);
		margin-bottom: 20rpx;
	}

	.section-desc {
		display: block;
		font-size: 26rpx;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.85);
		text-align: center;
	}

	// FAQ分类
	.faq-category {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
	}

	.category-header {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: linear-gradient(135deg, #f8f9fa, #fff);
		border-bottom: 1rpx solid #f0f0f0;
	}

	.category-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	// FAQ项
	.faq-item {
		border-bottom: 1rpx solid #f0f0f0;
		transition: background-color 0.3s;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background-color: #fafafa;
		}
	}

	.faq-question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		cursor: pointer;
	}

	.question-text {
		flex: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		line-height: 1.5;
	}

	.toggle-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44rpx;
		height: 44rpx;
		margin-left: 20rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
		font-size: 32rpx;
		font-weight: 600;
		color: #00d4aa;
		transition: all 0.3s;

		&.active {
			background-color: #00d4aa;
			color: #fff;
			transform: rotate(180deg);
		}
	}

	.faq-answer {
		padding: 0 30rpx 30rpx;
		animation: slideDown 0.3s ease;
	}

	.answer-text {
		display: block;
		font-size: 26rpx;
		line-height: 1.8;
		color: #666;
		background-color: #f8f9fa;
		padding: 24rpx;
		border-radius: 12rpx;
		border-left: 4rpx solid #00d4aa;
	}

	// 联系我们
	.contact-section {
		background: linear-gradient(135deg, #fff, #f8f9fa);
		border-radius: 20rpx;
		padding: 40rpx;
		margin-top: 24rpx;
		text-align: center;
	}

	.contact-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24rpx;
	}

	.contact-title {
		display: block;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 16rpx;
	}

	.contact-text {
		display: block;
		font-size: 26rpx;
		color: #666;
		margin-bottom: 32rpx;
		line-height: 1.6;
	}

	.contact-buttons {
		display: flex;
		gap: 20rpx;
		justify-content: center;
	}

	.contact-btn {
		flex: 1;
		max-width: 280rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border: 2rpx solid #00d4aa;
		border-radius: 40rpx;
		transition: all 0.3s;

		&.primary {
			background: linear-gradient(135deg, #00d4aa, #00c299);
			border: none;

			.btn-text {
				color: #fff;
			}
		}

		&:active {
			transform: scale(0.98);
			opacity: 0.8;
		}
	}

	.btn-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #00d4aa;
	}

	// 动画
	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>

